<template>
  <div>

    <el-card class="flow-card">
      <el-row>
        <el-col :span="8" style="width: 100%;">
          <el-form class="demo-form-inline" :inline="true">
            <el-form-item label="时间范围">
              <el-date-picker v-model="OrdersDto.startTime" type="date" placeholder="开始时间"
              ></el-date-picker>
              <el-date-picker v-model="OrdersDto.endTime" type="date" placeholder="结束时间"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="车辆类型">
              <el-checkbox-group v-model="OrdersDto.vehicleTypes">
                <el-checkbox :label="1">经济型</el-checkbox>
                <el-checkbox :label="2">舒适型</el-checkbox>
                <el-checkbox :label="3">豪华型</el-checkbox>
                <el-checkbox :label="4">货运</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="queryData">查询</el-button>
              <el-button type="success" @click="exportData">导出</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <br>
      <br>
      <div ref="chart" style="width: 1408px; height: 625px;"></div>
    </el-card>
  </div>
</template>

<script>
import axios from "axios";
import ExcelJS from "exceljs";
import * as echarts from "echarts";

export default {
  data() {
    return {
      cityLevel: '全部',
      city: '全部',
      district: '全部',
      orderTime: '按日',
      startTime: '',
      endTime: '',
      checkList:[1,2,3,4],
      DatesInRange: [],
      inflow: [],
      OrdersDto: {
        startTime: null,
        endTime: null,
        vehicleTypes: [1,2,3,4]
      },
    };
  },
  mounted() {
    this.getDatesInRange();
  },
  methods: {
    drawChart() {
      let chart = this.$echarts.init(this.$refs.chart);
      // 模拟数据，实际数据应从接口获取
      chart.setOption({
        title: {
          text: '人均订单数'
        },
        toolbox: {
          show: true,
          feature: {
            mark: {show: true},
            saveAsImage: {show: true},
          }
        },
        legend: {
          data: ['人均订单数']
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.DatesInRange,
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} 单'
          }
        },
        series: [
          {
            name: '人均订单数',
            type: 'line',
            color: '#5087ec',
            data: this.inflow,
            areaStyle: {}
          }
        ]
      });
    },
    queryData() {
      console.log('执行提交操作，开始时间：', this.OrdersDto.startTime, '，结束时间：', this.OrdersDto.endTime);
      console.log(this.OrdersDto)
      this.getDatesInRange(this.OrdersDto);
    },
    getDatesInRange(ordersDto) {
      if (ordersDto == null) {
        ordersDto = {}
      }
      axios.post("http://localhost:9999/api-cockpit/orders/getDatesInRange", ordersDto).then(res => {
        this.DatesInRange = res.data.data;
        this.getLoginStatistics()
      })
    },
    getLoginStatistics(){
      axios.post('http://localhost:9999/api-cockpit/orders/getLoginStatistics',this.OrdersDto).then(response => {
        this.inflow = response.data.data;
        console.log(this.inflow);
        this.drawChart();
      });
    },
    exportData() {
      // 实现导出逻辑
      const workbook = new ExcelJS.Workbook(); // 创建工作簿
      const worksheet = workbook.addWorksheet('Sheet1'); // 添加工作表

      const chart = echarts.getInstanceByDom(this.$refs.chart) // 获取图表实例
      const base64Image = chart.getDataURL({
        pixelRatio: 2, // 导出图片的分辨率比例，默认为1，即图片的分辨率为屏幕分辨率的一倍
        backgroundColor: '#fff' // 导出图片的背景色
      })
      let image = workbook.addImage({ // 添加图片
        base64: base64Image, // 图片的base64编码
        extension: 'png'  // 图片的扩展名
      });
      worksheet.addImage(image, 'A1:J20'); // 将图片添加到工作表中
      workbook.xlsx.writeBuffer().then(function (buffer) { // 生成excel文件的二进制数据
        saveAs.saveAs(new Blob([buffer], {  // 生成Blob对象
          type: 'application/octet-stream'  // 指定文件的MIME类型
        }), '人均订单数.xlsx');  // 指定文件名
      });
    }
  }
};
</script>

<style scoped>
.flow-card {
  margin-bottom: 20px;
}
</style>
